<template>
  <div class="inside-page">
    <div class="position content">
      <p class="detail-title">
        职位管理<span class="btn" @click="addPos">新增职位</span>
      </p>
      <div class="filter">
        <span :class="[active === 1 && 'active']" @click="toSearch(1)"
          >招聘中</span
        >
        <span :class="[active === 2 && 'active']" @click="toSearch(2)"
          >已过期</span
        >
      </div>
      <Pos-Manage :list="jobList" />
      <client-only>
        <el-pagination
          hide-on-single-page
          background
          prev-text="上一页"
          next-text="下一页"
          layout="prev, pager, next"
          :current-page="pageNo"
          :page-size="pageSize"
          :total="total"
          @current-change="handleCurrentChange"
        />
      </client-only>
    </div>
  </div>
</template>

<script>
import { jobList } from '@/api/job';

export default {
  asyncData: ({ req }) => ({
  }),
  components: {},
  data () {
    return {
      total: 0,
      pageNo: 1,
      pageSize: 15,
      active: 1,
      jobList: [],
    }
  },
  head () {
    return {
      titleTemplate: (titleChunk) => {
        return `${titleChunk} - 大学生找工作、找实习`;
      }
    }
  },
  created () {
    this.fetchData();
  },
  mounted () {
  },
  watch: {

  },
  computed: {

  },
  methods: {
    toSearch (active) {
      this.active = active;
      this.pageNo = 1;
      this.fetchData();
    },
    handleCurrentChange (val) {
      this.pageNo = val;
      this.fetchData();
    },
    async fetchData () {
      await jobList({
        status: this.active,
        page: this.pageNo,
      }).then(res => {
        if (res.code === 200) {
          this.total = res.data && res.data.count;
          this.jobList = res.data && res.data.data && res.data.data.map(s => {
            s.showTipsMenu = false;
            s.active = s.status === 1;
            return s;
          });
        } else {
          this.$message.error(res.msg);
        }
      }).catch(err => {
        console.error(err)
        this.$message.error(err);
      })
    },
    addPos () {
      this.$router.push({
        path: '/position/detail',
      })
    },
    jumpTo (obj) {
      this.$router.push({
        path: '/position/detail',
        query: { id: obj.id }
      })
    }
  },
}
</script>

<style lang="scss" scoped>
.inside-page {
  width: 100%;
  position: relative;
  .position {
    .filter {
      height: 50px;
      line-height: 50px;
      background: #f6f7f8;
      span {
        display: inline-block;
        width: 85px;
        height: 18px;
        line-height: 18px;
        font-size: 18px;
        text-align: center;
        color: #999;
        cursor: pointer;
        border-right: 1px solid #ccc;
        &.active,
        &:hover {
          color: #24292f;
        }
        &:last-child {
          border: 0;
        }
      }
    }
  }
}
</style>
